<template>
  <div class="table-list">
    <div v-for="item in tableData" :key="item.id" class="issue-item" @dblclick="rowView(item)">
      <div class="title">
        <img src="@/assets/icons/title.png" />
        <span>{{ item.issueName }}</span>
      </div>
      <div class="type">
        <img :src="$store.getters['dict/dictIconByParent']('IssueType', item.issueType)" />
        <span>{{ $store.getters['dict/dictValueByParent']('IssueType', item.issueType) }}</span>
      </div>
      <div class="state">
        <img :src="$store.getters['dict/dictIconByParent']('IssueStatus', item.issueStatus)" />
        <span>{{ $store.getters['dict/dictValueByParent']('IssueStatus', item.issueStatus) }}</span>
      </div>
      <div class="user">
        <img src="@/assets/icons/user.png" />
        <span>{{ $store.getters['user/getUserNameById'](item.issueCreateUser) }}</span>
      </div>
      <div class="repair">
        <img src="@/assets/icons/repair.png" />
        <span>{{ $store.getters['user/getUserNameById'](item.issueAppointUser) }}</span>
      </div>
      <div class="level">
        <img :src="$store.getters['dict/dictIconByParent']('IssueLevel', item.issueLevel)" />
        <span>{{ $store.getters['dict/dictValueByParent']('IssueLevel', item.issueLevel) }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TableList',
  props: {
    tableData: {
      default: () => [],
      type: Array
    }
  },
  methods: {
    rowView(item) {
      this.$bus.$emit('issue-view', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.issue-item {
  padding: 5px 10px;
  min-height: 55px;
  display: flex;
  align-items: center;
  color: #656565;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #ececec;
}
.title,
.type,
.state,
.user,
.repair,
.level {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 50px;
  width: 160px;
  cursor: pointer;
}

.title {
  width: 550px;
  margin-left: 20px;
}
img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-size: 100% 100%;
  margin-right: 10px;
}
</style>
